<template>
	<div id="mBtn" :style="contentStyle">
		<div :class="btntype" @click='submitSub' :style="btnStyles">
			{{btnName}}
		</div>
    <div class="drop">
      <slot name='drop'></slot>
    </div>
	</div>
</template>

<script>
	export default{
		name:'mBtn',
		props:{
            contentStyle:{
                type:Object
            },
            btnStyles:{
            	type:Object
			},
			btnName:{
				type:String,
				default:'添加订阅'
			},
			btnType:{
				type:String,
				default:'middle'
			}
		},
		methods:{
			submitSub(){
				this.$emit('onsubmitSub');
			}
		},
		computed:{
			btntype(){
				switch(this.btnType){
					case  'middle'  :
					return 'middle'
					break;
					case  'big'  :
					return 'big'
					break;
					default:
					return 'middle'
					break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../styles/common.scss";
#mBtn{
	padding:px2rem(30);
  position: relative;
	>div.middle{
		background-color: #2196e6;
		border-radius: px2rem(10);
		width: px2rem(350);
		height:px2rem(84);
		line-height:px2rem(84);
		font-size: px2rem(34);
		color: #fff;
		text-align: center;
	}
	>div.big{
		background-color: #2196e6;
		border-radius: px2rem(10);
		width: px2rem(660);
		height:px2rem(84);
		line-height: px2rem(84);
		font-size: px2rem(34);
		color: #fff;
		text-align: center;
	}
  >div.drop{
    position: absolute;
    top: px2rem(84);
    left: 0;
  }
}
</style>
